<template>
	<section class="chart-container">
		<el-row :gutter="24" >
			<el-col :span="20" >
				<el-row style="background: #efefef;margin-bottom: 5px">
					<el-row  style="margin-top: 10px;margin-left: 20px" >
						<el-form :inline="true" :model="filters">
							<el-form-item>
								<el-date-picker
										clearable
										type="datetimerange"
										value-format="yyyy-MM-dd HH:mm:ss"
										v-model="filters.timeRange"
								></el-date-picker>
							</el-form-item>
							<el-form-item >
								<el-button type="primary" @click="searchClick" >查询</el-button>
							</el-form-item>
						</el-form>
					</el-row>
					<el-col :span="12">
						<div id="chartBar" style="width:100%; height:400px;"></div>
					</el-col>
					<el-col :span="12">
						<div id="chartPie" style="width:100%; height:400px;"></div>
					</el-col>
				</el-row>
				<el-row v-if="1==2" style="background: #efefef" >
					<el-col :span="24">
						<div id="chartLine" style="width:100%; height:250px;"></div>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
	</section>
</template>

<script>
	import {mainTopData} from '../api/api'
	import echarts from 'echarts'

	export default {
		data() {
			return {
				chartColumn: null,
				chartBar: null,
				chartLine: null,
				chartPie: null,
				filters:{
					timeRange:[]
				},
				circleData:[],
				namesData:[],
				moneyData:[],
				timeData:[]
			}
		},

		methods: {
			searchClick(){
				this.search()
			},
			resetClick(){

			},
			drawPieChart() {
				this.chartPie = echarts.init(document.getElementById('chartPie'));
				this.chartPie.setOption({
					title: {
						text: '各个桌子收入百分比',
						x: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						data: this.namesData
					},
					series: [
						{
							name: '收入',
							type: 'pie',
							radius: '55%',
							center: ['50%', '60%'],
							data: this.circleData,
							itemStyle: {
								emphasis: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}
					]
				});
			},
			drawBarChart() {
				this.chartBar = echarts.init(document.getElementById('chartBar'));
				this.chartBar.setOption({
					title: {
						text: '总收入情况',
						subtext: '总收入和总时间'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {
						orient: 'horizontal',
						data: ['总收入(元)', '总时间(小时)']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, 0.01]
					},
					xAxis: {
						type: 'category',
						data: this.namesData
					},
					series: [
						{
							name: '总收入',
							type: 'bar',
							data: this.moneyData
						},
						{
							name: '总时间',
							type: 'bar',
							data: this.timeData
						}
					]
				});
			},

			drawLineChart() {
				this.chartLine = echarts.init(document.getElementById('chartLine'));
				this.chartLine.setOption({
					title: {
						text: '当月收入趋势情况'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['邮件营销', '联盟广告', '搜索引擎']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
					},
					yAxis: {
						type: 'value'
					},
					series: [
						{
							name: '邮件营销',
							type: 'line',
							stack: '总量',
							data: [120, 132, 101, 134, 90, 230, 210]
						},
						{
							name: '联盟广告',
							type: 'line',
							stack: '总量',
							data: [220, 182, 191, 234, 290, 330, 310]
						},
						{
							name: '搜索引擎',
							type: 'line',
							stack: '总量',
							data: [820, 932, 901, 934, 1290, 1330, 1320]
						}
					]
				});
			},

			drawCharts() {
				this.drawBarChart()
				this.drawPieChart()
				// this.drawLineChart()
			},
			search(){
				mainTopData(this.filters).then(resp => {
					if(resp.code == '200'){
						this.circleData = resp.data.circle
						this.namesData = resp.data.deskNames
						this.timeData = resp.data.timeList
						this.moneyData = resp.data.totalIncome
						this.drawCharts()
					}
				})
			}
		},

		mounted: function () {
			this.search()
		},
		updated: function () {
			this.drawCharts()
		}
	}
</script>

<style scoped>
	.chart-container {
		width: 100%;
		float: left;
	}
	/*.chart div {
        height: 400px;
        float: left;
    }*/

	.el-col {
		padding: 30px 20px;
	}
</style>
